<!DOCTYPE html>
<html>
<head>
<title>Circuit Diagram</title>
</head>
<body>

<canvas id="circuitCanvas" width="560" height="350"></canvas>

<script>
const canvas = document.getElementById('circuitCanvas');
const ctx = canvas.getContext('2d');

// --- Style and Configuration ---
ctx.lineWidth = 1.5;
ctx.strokeStyle = 'black';
ctx.fillStyle = 'black';
ctx.font = '18px Arial';

// --- Helper function to draw a lamp ---
function drawLamp(x, y, radius) {
    ctx.lineWidth = 1.5;
    // Circle
    ctx.beginPath();
    ctx.arc(x, y, radius, 0, 2 * Math.PI);
    ctx.stroke();
    // Cross
    const offset = radius / Math.sqrt(2);
    ctx.beginPath();
    ctx.moveTo(x - offset, y - offset);
    ctx.lineTo(x + offset, y + offset);
    ctx.moveTo(x + offset, y - offset);
    ctx.lineTo(x - offset, y + offset);
    ctx.stroke();
}

// --- Define Coordinates ---
const yTop = 100;
const yBottom = 250;
const yLampCenter = (yTop + yBottom) / 2;
const lampRadius = 18;
const terminalRadius = 5;
const junctionRadius = 2.5;

const startX = 60;
const fuseStartX = 120;
const fuseEndX = 200;
const lamp1X = 280;
const lamp2X = 380;
const lamp3X = 480;
const endX = lamp3X;

// --- Draw Text Labels ---
ctx.textAlign = 'left';
ctx.fillText('Fig. 8.1 shows 3 lamps and a fuse connected to a power supply.', 40, 40);
ctx.textAlign = 'center';
ctx.fillText('Fig. 8.1', canvas.width / 2, 320);
ctx.textAlign = 'left';
ctx.fillText('220 V', 20, 180);

// --- Draw Main Wires ---
// Top wire
ctx.beginPath();
ctx.moveTo(startX, yTop);           // From terminal
ctx.lineTo(fuseStartX, yTop);       // To fuse
ctx.moveTo(fuseEndX, yTop);         // From fuse
ctx.lineTo(endX, yTop);             // To end of parallel section
ctx.stroke();

// Bottom wire
ctx.beginPath();
ctx.moveTo(startX, yBottom);        // From terminal
ctx.lineTo(endX, yBottom);          // To end of parallel section
ctx.stroke();

// --- Draw Power Supply Terminals ---
ctx.fillStyle = 'white'; // To make the circles hollow
ctx.beginPath();
ctx.arc(startX, yTop, terminalRadius, 0, 2 * Math.PI);
ctx.fill();
ctx.stroke();
ctx.beginPath();
ctx.arc(startX, yBottom, terminalRadius, 0, 2 * Math.PI);
ctx.fill();
ctx.stroke();


// --- Draw Fuse ---
ctx.fillStyle = 'white';
ctx.beginPath();
// The rectangle for the fuse body
ctx.rect(fuseStartX, yTop - 8, fuseEndX - fuseStartX, 16);
ctx.stroke();
// The line through the fuse
ctx.beginPath();
ctx.moveTo(fuseStartX, yTop);
ctx.lineTo(fuseEndX, yTop);
ctx.stroke();


// --- Draw Parallel Lamp Branches ---
const lampPositions = [lamp1X, lamp2X, lamp3X];
lampPositions.forEach(x => {
    // Vertical wires
    ctx.beginPath();
    ctx.moveTo(x, yTop);
    ctx.lineTo(x, yLampCenter - lampRadius);
    ctx.moveTo(x, yLampCenter + lampRadius);
    ctx.lineTo(x, yBottom);
    ctx.stroke();

    // Lamp symbol
    drawLamp(x, yLampCenter, lampRadius);

    // Junction dots
    ctx.fillStyle = 'black';
    ctx.beginPath();
    ctx.arc(x, yTop, junctionRadius, 0, 2 * Math.PI);
    ctx.fill();
    ctx.beginPath();
    ctx.arc(x, yBottom, junctionRadius, 0, 2 * Math.PI);
    ctx.fill();
});

</script>

</body>
</html>